<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整体界面概览 - 原型图</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 40px;
            min-height: 100vh;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            font-weight: 300;
        }

        .overview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .interface-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .interface-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e9ecef;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            font-weight: bold;
        }

        .icon-popup {
            background: linear-gradient(135deg, #4CAF50, #45a049);
        }

        .icon-context {
            background: linear-gradient(135deg, #2196F3, #1976D2);
        }

        .icon-settings {
            background: linear-gradient(135deg, #FF9800, #F57C00);
        }

        .icon-management {
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
        }

        .card-title {
            font-size: 1.3em;
            color: #333;
            font-weight: 600;
        }

        .card-description {
            color: #666;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin-top: 15px;
        }

        .feature-list li {
            padding: 8px 0;
            color: #555;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9em;
        }

        .feature-list li::before {
            content: "✓";
            color: #4CAF50;
            font-weight: bold;
        }

        .workflow-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
        }

        .workflow-title {
            font-size: 1.8em;
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .workflow-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .workflow-step {
            flex: 1;
            min-width: 200px;
            text-align: center;
            position: relative;
        }

        .step-number {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2196F3, #1976D2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            font-weight: bold;
            margin: 0 auto 15px;
        }

        .step-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .step-description {
            color: #666;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .step-arrow {
            position: absolute;
            top: 30px;
            right: -30px;
            font-size: 24px;
            color: #2196F3;
        }

        .architecture-section {
            background: #2c3e50;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            color: white;
        }

        .architecture-title {
            font-size: 1.8em;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .architecture-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .arch-component {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .arch-icon {
            font-size: 2em;
            margin-bottom: 15px;
        }

        .arch-name {
            font-weight: 600;
            margin-bottom: 10px;
        }

        .arch-description {
            font-size: 0.9em;
            opacity: 0.9;
            line-height: 1.4;
        }

        .interaction-flow {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
        }

        .flow-title {
            font-size: 1.8em;
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .flow-diagram {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .flow-node {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px 20px;
            text-align: center;
            min-width: 120px;
            position: relative;
        }

        .flow-node.active {
            border-color: #2196F3;
            background: #e3f2fd;
        }

        .flow-node-icon {
            font-size: 1.5em;
            margin-bottom: 8px;
        }

        .flow-node-text {
            font-size: 0.9em;
            color: #333;
            font-weight: 500;
        }

        .flow-arrow {
            font-size: 20px;
            color: #2196F3;
            margin: 0 10px;
        }

        .specifications {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
        }

        .spec-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
            text-align: center;
        }

        .spec-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .spec-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #e9ecef;
        }

        .spec-card-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .spec-list {
            list-style: none;
            padding: 0;
        }

        .spec-list li {
            padding: 8px 0;
            color: #555;
            border-bottom: 1px solid #f0f0f0;
        }

        .spec-list li:last-child {
            border-bottom: none;
        }

        .spec-list li::before {
            content: "•";
            color: #2196F3;
            font-weight: bold;
            margin-right: 10px;
        }

        @media (max-width: 768px) {
            .workflow-steps {
                flex-direction: column;
            }

            .step-arrow {
                display: none;
            }

            .flow-diagram {
                flex-direction: column;
            }

            .flow-arrow {
                transform: rotate(90deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>整体界面概览 - 原型图</h1>

        <div class="overview-grid">
            <div class="interface-card">
                <div class="card-header">
                    <div class="card-icon icon-popup">📥</div>
                    <div>
                        <div class="card-title">弹出窗口</div>
                        <div class="card-description">主控制面板，快速访问核心功能</div>
                    </div>
                </div>
                <ul class="feature-list">
                    <li>媒体扫描和检测</li>
                    <li>批量选择和下载</li>
                    <li>实时进度显示</li>
                    <li>快速设置访问</li>
                    <li>状态指示和通知</li>
                </ul>
            </div>

            <div class="interface-card">
                <div class="card-header">
                    <div class="card-icon icon-context">🖱️</div>
                    <div>
                        <div class="card-title">右键菜单</div>
                        <div class="card-description">上下文菜单集成，便捷操作</div>
                    </div>
                </div>
                <ul class="feature-list">
                    <li>单个文件下载</li>
                    <li>批量下载选项</li>
                    <li>文件信息查看</li>
                    <li>地址复制功能</li>
                    <li>清晰度选择</li>
                </ul>
            </div>

            <div class="interface-card">
                <div class="card-header">
                    <div class="card-icon icon-settings">⚙️</div>
                    <div>
                        <div class="card-title">设置面板</div>
                        <div class="card-description">详细配置和个性化选项</div>
                    </div>
                </div>
                <ul class="feature-list">
                    <li>下载路径配置</li>
                    <li>文件格式筛选</li>
                    <li>并发下载设置</li>
                    <li>命名规则定制</li>
                    <li>高级选项配置</li>
                </ul>
            </div>

            <div class="interface-card">
                <div class="card-header">
                    <div class="card-icon icon-management">📊</div>
                    <div>
                        <div class="card-title">下载管理</div>
                        <div class="card-description">历史记录和队列管理</div>
                    </div>
                </div>
                <ul class="feature-list">
                    <li>下载历史查看</li>
                    <li>队列状态监控</li>
                    <li>批量操作控制</li>
                    <li>统计信息分析</li>
                    <li>数据导出功能</li>
                </ul>
            </div>
        </div>

        <div class="workflow-section">
            <div class="workflow-title">用户操作流程</div>
            <div class="workflow-steps">
                <div class="workflow-step">
                    <div class="step-number">1</div>
                    <div class="step-title">发现媒体</div>
                    <div class="step-description">用户浏览网页，发现想要下载的图片或视频</div>
                    <div class="step-arrow">→</div>
                </div>

                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-title">触发插件</div>
                    <div class="step-description">点击插件图标或右键菜单，启动下载功能</div>
                    <div class="step-arrow">→</div>
                </div>

                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-title">选择文件</div>
                    <div class="step-description">在弹出窗口中预览和选择要下载的文件</div>
                    <div class="step-arrow">→</div>
                </div>

                <div class="workflow-step">
                    <div class="step-number">4</div>
                    <div class="step-title">开始下载</div>
                    <div class="step-description">确认下载设置，开始文件下载过程</div>
                    <div class="step-arrow">→</div>
                </div>

                <div class="workflow-step">
                    <div class="step-number">5</div>
                    <div class="step-title">完成下载</div>
                    <div class="step-description">文件下载完成，保存到指定位置</div>
                </div>
            </div>
        </div>

        <div class="architecture-section">
            <div class="architecture-title">界面架构设计</div>
            <div class="architecture-grid">
                <div class="arch-component">
                    <div class="arch-icon">🎯</div>
                    <div class="arch-name">核心功能层</div>
                    <div class="arch-description">媒体检测、下载管理、文件处理等核心功能模块</div>
                </div>

                <div class="arch-component">
                    <div class="arch-icon">🎨</div>
                    <div class="arch-name">界面展示层</div>
                    <div class="arch-description">弹出窗口、右键菜单、设置面板等用户界面</div>
                </div>

                <div class="arch-component">
                    <div class="arch-icon">🔧</div>
                    <div class="arch-name">交互控制层</div>
                    <div class="arch-description">用户操作处理、状态管理、事件响应</div>
                </div>

                <div class="arch-component">
                    <div class="arch-icon">💾</div>
                    <div class="arch-name">数据存储层</div>
                    <div class="arch-description">设置保存、历史记录、缓存管理等</div>
                </div>

                <div class="arch-component">
                    <div class="arch-icon">🌐</div>
                    <div class="arch-name">网络通信层</div>
                    <div class="arch-description">HTTP请求、文件下载、API调用等</div>
                </div>

                <div class="arch-component">
                    <div class="arch-icon">🔒</div>
                    <div class="arch-name">安全权限层</div>
                    <div class="arch-description">权限管理、安全检查、隐私保护</div>
                </div>
            </div>
        </div>

        <div class="interaction-flow">
            <div class="flow-title">界面交互流程</div>
            <div class="flow-diagram">
                <div class="flow-node active">
                    <div class="flow-node-icon">🌐</div>
                    <div class="flow-node-text">网页浏览</div>
                </div>

                <div class="flow-arrow">→</div>

                <div class="flow-node">
                    <div class="flow-node-icon">📥</div>
                    <div class="flow-node-text">插件触发</div>
                </div>

                <div class="flow-arrow">→</div>

                <div class="flow-node">
                    <div class="flow-node-icon">🔍</div>
                    <div class="flow-node-text">媒体扫描</div>
                </div>

                <div class="flow-arrow">→</div>

                <div class="flow-node">
                    <div class="flow-node-icon">✅</div>
                    <div class="flow-node-text">文件选择</div>
                </div>

                <div class="flow-arrow">→</div>

                <div class="flow-node">
                    <div class="flow-node-icon">⬇️</div>
                    <div class="flow-node-text">开始下载</div>
                </div>

                <div class="flow-arrow">→</div>

                <div class="flow-node">
                    <div class="flow-node-icon">📁</div>
                    <div class="flow-node-text">保存完成</div>
                </div>
            </div>
        </div>

        <div class="specifications">
            <div class="spec-title">界面设计规范</div>
            <div class="spec-grid">
                <div class="spec-card">
                    <div class="spec-card-title">🎨 视觉设计</div>
                    <ul class="spec-list">
                        <li>遵循Material Design设计语言</li>
                        <li>统一的色彩方案和图标风格</li>
                        <li>响应式布局适配不同屏幕</li>
                        <li>清晰的视觉层次和信息架构</li>
                        <li>适当的动画和过渡效果</li>
                    </ul>
                </div>

                <div class="spec-card">
                    <div class="spec-card-title">🖱️ 交互设计</div>
                    <ul class="spec-list">
                        <li>直观的操作流程和反馈机制</li>
                        <li>支持键盘快捷键和鼠标操作</li>
                        <li>错误处理和用户提示</li>
                        <li>加载状态和进度指示</li>
                        <li>无障碍设计支持</li>
                    </ul>
                </div>

                <div class="spec-card">
                    <div class="spec-card-title">📱 用户体验</div>
                    <ul class="spec-list">
                        <li>快速响应和流畅操作</li>
                        <li>个性化设置和偏好保存</li>
                        <li>智能默认值和推荐选项</li>
                        <li>帮助文档和操作指引</li>
                        <li>多语言界面支持</li>
                    </ul>
                </div>

                <div class="spec-card">
                    <div class="spec-card-title">🔧 技术实现</div>
                    <ul class="spec-list">
                        <li>Chrome Extension API集成</li>
                        <li>模块化代码架构</li>
                        <li>性能优化和内存管理</li>
                        <li>数据持久化和同步</li>
                        <li>错误监控和日志记录</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加一些交互效果
        document.querySelectorAll('.interface-card').forEach(card => {
            card.addEventListener('click', function () {
                // 可以添加点击跳转到具体原型图的逻辑
                console.log('点击了界面卡片:', this.querySelector('.card-title').textContent);
            });
        });

        // 工作流程步骤动画
        const observerOptions = {
            threshold: 0.5,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.workflow-step').forEach(step => {
            step.style.opacity = '0';
            step.style.transform = 'translateY(20px)';
            step.style.transition = 'all 0.6s ease';
            observer.observe(step);
        });
    </script>
</body>

</html>